<template>
	<view class="mainpadding">
		<u-swiper :list="list1" keyName="image_text" radius="10" height="156" indicator circular
			@click="lbtclick($event,list1)"></u-swiper>
		<view class="flexbetween huibox margin_top">
			<view :class="current==1?'yixz flexcenter':'weixianz flexcenter'" @click="selectab(1)">
				<view>车辆租赁</view>
			</view>
			<view :class="current==2?'yixz flexcenter':'weixianz flexcenter'" @click="selectab(2)">
				<view>车辆购买</view>
			</view>
			<view :class="current==3?'yixz flexcenter':'weixianz flexcenter'" @click="selectab(3)">
				<view>车辆自营</view>
			</view>
		</view>
		<view class="flexbetween mainpadding ffffff shadow margin_top">
			<view class="flexleft" @click="xhshow=true">
				<view class="ershil xiaohei textcenter margin_right1 yhxk" style="width: 105rpx;">
					{{user_car_type_name1?user_car_type_name1:'车辆品牌'}}</view>
				<u-icon name="arrow-down-fill" color="#333333" size="8"></u-icon>
			</view>
			<view class="flexleft" @click="xhshow=true">
				<view class="ershil xiaohei textcenter margin_right1 yhxk" style="width: 105rpx;">
					{{user_car_type_name2?user_car_type_name2:'车辆类型'}}</view>
				<u-icon name="arrow-down-fill" color="#333333" size="8"></u-icon>
			</view>
			<view class="flexleft" @click="priceshow=true">
				<view class="ershil xiaohei margin_right1">车辆价格</view>
				<u-icon name="arrow-down-fill" color="#333333" size="8"></u-icon>
			</view>
			<view class="flexleft" @click="priceshow=true">
				<view class="ershil xiaohei margin_right1">首付比例</view>
				<u-icon name="arrow-down-fill" color="#333333" size="8"></u-icon>
			</view>
		</view>
		<view class="flexcolumn" v-if="list.data.length==0">
			<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			<view class="xiaohui margin_top main_size">暂无数据</view>
		</view>
		<view class="mainpadding ffffff shadow radius margin_top flextop" v-for="item in list.data" :key="item.id"
			@click="tzcxxq(item.id)">
			<image style="width: 230rpx;height: 170rpx;" :src="item.image_text" mode=""></image>
			<view class="flexcolumnbet" style="width: 60%;height: 170rpx;">
				<view class="titletext zhonghei fonweight yhxk" style="width: 300rpx;">{{item.name}}</view>
				<view class="">
					<text class="strongtext xiaohong">￥</text>
					<text class="bigtext xiaohong fonweight">{{item.price}}</text>
					<text class="xiaohong strongtext">起</text>
				</view>
			</view>
		</view>
		<view class="" v-if="sxShow">
			<u-picker :show="xhshow" ref="uPicker" title="选择品牌-车型" keyName="name" :columns="columns" @confirm="confirm"
				@cancel="cancel" @change="changeHandler"></u-picker>
		</view>
		<u-popup :show="priceshow" @close="priceshow=false;" :round="20">
			<view class="mainpadding" style="padding-bottom: 80rpx;">
				<view class="bigtext zhonghei fonweight textcenter">筛选</view>
				<view class="titletext margin_top5 zhonghei fonweight">车辆价格</view>
				<view class="flexleft flex_wrap margin_top2">
					<view class="margin_top2 margin_right2 flexcenter"
					 :class="priceCurrent==index?'yixzbtn':'yixxbtn'" 
					 v-for="(item,index) in priceList" :key="index"
					 @click="priceCurrent=index"
					>{{item.min}}{{item.max==""?"":"-"+item.max}}</view>
				</view>
				<view class="titletext margin_top5 zhonghei fonweight">首付比例</view>
				<view class="flexleft flex_wrap margin_top2">
					<view class="margin_top2 margin_right2 flexcenter"
					 :class="rateCurrent==index?'yixzbtn':'yixxbtn'" 
					 v-for="(item,index) in rateList" :key="index"
					 @click="rateCurrent=index"
					>{{item.max==""?item.min:item.min+"%"}}{{item.max==""?"":"-"+item.max+"%"}}</view>
				</view>
				<view class="bigbtn margin_top5" @click="priceshow=false;init()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				current: 1,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				sxShow: false,
				xhshow: false,
				columns: [],
				columnData: [],
				user_car_type_id: "",
				user_car_type_name1:"",
				user_car_type_name2: "",
				min_price: "",
				max_price: "",
				min_payrate: "",
				max_payrate: "",
				priceshow:false,
				priceList:[
					{
						min:0,
						max:3000
					},
					{
						min:3000,
						max:3500
					},
					{
						min:3500,
						max:4000
					},
					{
						min:"4000以上",
						max:""
					}
				],
				priceCurrent:-1,
				rateList:[
					{
						min:0,
						max:10
					},
					{
						min:10,
						max:30
					},
					{
						min:30,
						max:70
					},
					{
						min:"70%以上",
						max:""
					}
				],
				rateCurrent:-1
			}
		},
		onLoad() {
			this.init()
			this.getbanner()
			this.getcx()
		},
		methods: {
			getcx() {
				httpRequest.request('/api/user/userCarTypeIndex', 'GET', {}, false, false, true).then(res => {
					this.columns[0] = res.data
					this.columns[1] = res.data[0].child
					res.data.forEach((item, index) => {
						this.columnData[index] = item.child
					})
					this.sxShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.user_car_type_id = e.value[1].id
				this.user_car_type_name1 = e.value[0].name
				this.user_car_type_name2 = e.value[1].name
				this.xhshow = false
				this.init()
			},
			cancel() {
				this.xhshow = false
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 2,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			init(isPage, page) {
				let _this = this;
				let min_price = this.priceCurrent==-1?"":this.priceList[this.priceCurrent].min
				let max_price = this.priceCurrent==-1?"":this.priceList[this.priceCurrent].max
				let min_payrate = this.rateCurrent==-1?"":this.rateList[this.rateCurrent].min
				let max_payrate = this.rateCurrent==-1?"":this.rateList[this.rateCurrent].max
				let data = {
					page: page || 1,
					limit: _this.limit,
					car_type: this.current,
					user_car_type_id: this.user_car_type_id,
					min_price: min_price=="4000以上"?4000:min_price,
					max_price: max_price,
					min_payrate: min_payrate=="70%以上"?70:min_payrate,
					max_payrate: max_payrate,
				}
				let url = '/api/carcl/carIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			lbtclick(e, list) {
				console.log(e, list);
				if (list[e].url) {
					uni.navigateTo({
						url: list[e].url
					})
				}
			},
			// 跳转车型详情
			tzcxxq(id) {
				uni.navigateTo({
					url: '/pages_index/chexingxq?id='+id
				})
			},
			selectab(i) {
				if (i == this.current) {
					return false
				}
				this.current = i
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yixxbtn {
		font-weight: 500;
		font-size: 28rpx;
		color: #333;
		width: 300rpx;
		height: 80rpx;
		background: #F7F9FA;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}
	.yixzbtn {
		font-weight: 500;
		font-size: 28rpx;
		color: #fff;
		width: 300rpx;
		height: 80rpx;
		background: #ff8506;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
	}
	.weixianz {
		width: 33.33%;
		height: 70rpx;
		font-weight: 800;
		font-size: 26rpx;
		color: #626262;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yixz {
		width: 33.33%;
		height: 70rpx;
		background: #FF8505;
		font-weight: 800;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 116rpx 116rpx 116rpx 116rpx;
	}

	.huibox {
		padding: 6rpx;
		background: rgba(96, 96, 96, 0.1);
		border-radius: 116rpx 116rpx 116rpx 116rpx;
	}
</style>